<template>
  <div>
    <button @click="isShow = !isShow"> 切换：显示/隐藏</button>
    <transition name="cartoon">
      <h2 v-show="isShow">这是Vue封装的动画</h2>
    </transition>

  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    }
  },
}
</script>
<style>
h2 {
  background-color: orange;
  width: 300px;
}
@keyframes cartoon {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-200px);
  }
}
/* 出发动画离开的效果 */
.cartoon-leave-active {
  animation: 1s cartoon linear;
}
/* 出发动画进入的效果 */
.cartoon-enter-active {
  animation: 1s cartoon linear reverse;
}
</style>

